import type { FormProps } from "antd";
import { Button, Checkbox, Form, Input, Row, Col, message } from "antd";
import { UserOutlined, LockOutlined, SafetyOutlined } from "@ant-design/icons";
import "./login.scss";
import { useNavigate } from "react-router";
type FieldType = {
  username?: string;
  password?: string;
  code?: string;
  remember?: string;
};
// const onFinish: FormProps<FieldType>["onFinish"] = (values) => {
//   message.success("登录成功");
//   console.log(values);
//   setTimeout(() => {
//     navigator;
//   }, 1000);
// };

// const onFinishFailed: FormProps<FieldType>["onFinishFailed"] = (errorInfo) => {
//   console.log("Failed:", errorInfo);
// };

export default function Login() {
  const navigate = useNavigate();
  const onFinish: FormProps<FieldType>["onFinish"] = (values) => {
    message.success("登录成功");
    console.log(values);
    setTimeout(() => {
      navigate("/");
    }, 1000);
  };

  const onFinishFailed: FormProps<FieldType>["onFinishFailed"] = (
    errorInfo
  ) => {
    console.log("Failed:", errorInfo);
  };
  return (
    <>
      <div className="login flex-center">
        <div className="login-form">
          <h1 className="login-form-title">React-Admin</h1>
          <Form
            name="basic"
            style={{ maxWidth: 600 }}
            initialValues={{ remember: true }}
            onFinish={onFinish}
            onFinishFailed={onFinishFailed}
            autoComplete="off"
          >
            <Form.Item<FieldType>
              name="username"
              rules={[{ required: true, message: "请输入用户名" }]}
            >
              <Input prefix={<UserOutlined />} />
            </Form.Item>
            <Form.Item<FieldType>
              name="password"
              rules={[{ required: true, message: "请输入密码" }]}
            >
              <Input.Password prefix={<LockOutlined />} />
            </Form.Item>
            <Row gutter={10}>
              <Col span={16}>
                <Form.Item<FieldType>
                  name="code"
                  rules={[{ required: true, message: "请输入验证码" }]}
                >
                  <Input prefix={<SafetyOutlined />} />
                </Form.Item>
              </Col>
              <Col span={8}>
                <div className="login-code">
                  <img
                    src=""
                    className="login-code-img"
                  ></img>
                </div>
              </Col>
            </Row>
            <Form.Item<FieldType> name="remember" valuePropName="checked">
              <Checkbox>记住密码</Checkbox>
            </Form.Item>
            <Form.Item wrapperCol={{ span: 24 }}>
              <Button
                type="primary"
                htmlType="submit"
                style={{ width: "100%" }}
              >
                登录
              </Button>
            </Form.Item>
          </Form>
        </div>
      </div>
    </>
  );
}
